<!DOCTYPE html>
<html>

<head>
    <div id='div1' v-bind:title="div_title">{{hello_message}}</div>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    var v1 = new Vue({
         el: "#div1", 
         data: { hello_message: "Hello, there welcome to VueJS world", 
         div_title: "This is my intro div", }, 
            beforeCreate: function () { alert('Before Create'); }, 
            created: function () { alert('Created'); }, 
            beforeMount: function () { alert('Before Mount'); }, 
            mounted: function () { alert('Mounted'); },
            beforeUpdate: function () { alert('Before Update'); }, 
            updated: function () { alert('Updated'); }, 
            beforeDestroy: function () { alert('Before Destroy'); }, 
            destroyed: function () { alert('Destroyed'); } 
        });
          // To fire updatev1.$data.hello_message = "New message";
          // This can be invoked to destroy the object, which will fire the destroy hook
          v1.$destroy();
          </script>
</body>

</html>
